<template>
  <div>
    <a-card :bordered="false" style="height:100%">
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="$refs.modal.add()">添加</a-button>
      </div>
      <a-table
        class="components-table-demo-nested"
        ref="table" 
        :columns="columns" 
        :row-key="record => record.id" 
        :data-source="data" 
        :pagination="false" 
        :loading="loading" 
		bordered
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <template>
            <a-popconfirm
              title="是否删除该条记录?"
              @confirm="confirm(record)"
              @cancel="cancel"
              okText="是"
              cancelText="否"
            >
              <a href="#">删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handlePreEdit(record)">设置详情</a>
          </template>
        </span>
      </a-table>
    </a-card>
    <dictionary-setting-modal ref="modal" @ok="handleOk"></dictionary-setting-modal>
    <dictionary-setting-detail ref="modalDetail" @ok="handleOk"></dictionary-setting-detail>
  </div>

</template>

<script>
   import DictionarySettingModal from './modules/DictionarySettingModal'
  import DictionarySettingDetail from './modules/DictionarySettingDetail'
  
  import {
    getUrl,
    postAxiosUrl
  } from '@/api/manage' 

  export default {
    components: {
      DictionarySettingModal,
      DictionarySettingDetail
    },
    data() {
      return {
        data: [],
        pagination: {size:'small'},
        loading: false,
        columns: [{
            title: '编码',
            dataIndex: 'code'
          },{
            title: '名称',
            dataIndex: 'name'
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    created() {
      this.fetch()
    },
    methods: {
      handleOk(){
          this.fetch()
      },
      handleSubMenu(record) {
          this.$refs.modal.addSubMenu(record)
      },
      handleEdit (record) {
          this.$refs.modal.edit(record)
      },
      handlePreEdit (record) {
          this.$refs.modalDetail.show(record)
      },
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination)
        const pager = { ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        })
      },
      fetch(params = {}) {
        console.log('params:', params)
        this.loading = true
        var _this = this
        return getUrl('cutDictionary/getAll', params)
          .then(data => {
            
            const pagination = { ...this.pagination
            }
            // Read total count from server
            pagination.total = data.result.totalCount
            pagination.showTotal = total => `共 ${total} 条`
            pagination.showQuickJumper = true
            this.loading = false
            this.data = data.result
            this.pagination = pagination

          })
      },
      confirm (record) {
        const me = this
              postAxiosUrl('cutDictionary/del', {id : record.id})
                .then(res => {
                  me.fetch()
                })
      },
      cancel(e) {
      },
    }
  }
</script>
<style>
  .ant-select-dropdown-menu-item-selected,
  .ant-select-dropdown-menu-item-selected:hover {
    color: #52c41a;
    font-weight: 700;
    background-color: #fafafa;
  }
</style>
